<template>
  <div class="noteped-view">
    <div id="app">
      <h2>记事本</h2>
      <div class="notemain">
        <input v-model.trim="note" @keyup.enter="addNote" type="text" />
        <ul>
          <li v-for="(item, index) in noteList" :key="index">
            <div class="content">
              <span>{{ index + 1 }}.</span> {{ item.note }}
            </div>
            <button class="mainbutton" @click="remove(item)">❌</button>
          </li>
        </ul>
        <p v-if="noteList.length === 0" class="empty">空空如也...</p>
      </div>
      <div class="bottom">
        <span>合计: {{ noteList.length }}</span>
        <span @click="noteList = []">清空</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NotepedView",
  data() {
    return {
      note: "",
      noteList: JSON.parse(localStorage.getItem("noteBook")) || [
        { id: 1, note: '随便写点什么吧' },
      ],
    };
  },
  methods: {
    remove(item) {
      const res = confirm(`你确定要删除 ${item.note} 吗?`);
      if (res === true) {
        this.noteList = this.noteList.filter((v) => v.id !== item.id);
      }
    },
    addNote() {
      // 非空判断
      if (this.note === "") {
        alert("写点东西呗!");
      } else {
        // 有值
        this.noteList.unshift({
          id: Date.now(),
          note: this.note,
        });
        // 清空
        this.note = "";
      }
    },
  },
  watch: {
    noteList() {
      // console.log('变了');
      // 只要数据发生改变，就写入本地储存
      localStorage.setItem("noteBook", JSON.stringify(this.noteList));
    },
  },
};
</script>

<style scoped lang="less">
#app {
  margin: 0 auto;
  text-align: center;
  background: #fbebd4;
  max-width: 500px;
  box-sizing: border-box;
  padding-top: 50px;
  border-radius: 5px;

  .notemain {
    width: 100%;
    max-width: 500px;
    margin: 5px auto 0;
    transform: translateX(1px);
    background: #fbebd4;
    padding: 0 2vw;
    input {
      height: 40px;
      font-size: 20px;
      appearance: none;
      outline: none;
      border: none;
      padding-left: 5px;
      box-sizing: border-box;
      border-radius: 5px;
      color: #6a4d52;
      margin-bottom: 20px;
      width: 100%;
      max-width: 500px;
    }

    ul {
      padding: 0;
      margin-bottom: 0;

      li {
        list-style: none;
        border-bottom: 1px solid #6a4d52;
        text-align: left;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 25px;
        color: #8895a8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 40px;

        &:hover {
          background-color: #fcfaed;
        }

        span {
          color: #6a4d52;
        }

        .mainbutton {
          cursor: pointer;
          border: none;
          background-color: transparent;
        }
      }
    }

    p {
      color: #929093;
      font-size: 20px;
      margin: 0;
      padding: 0;
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 14px;

    span {
      color: #929093;

      &:last-child {
        cursor: pointer;
        color: #935256;
      }
    }
  }

  /* 响应式规则 */
  @media screen and (max-width: 768px) {
    max-width: 100%;
    padding: 20px;

    h2 {
      font-size: 24px;
    }

    .notemain {
      width: 100%;
      max-width: 100%;
      margin: 5px auto 0;
      padding: 20px;

      input {
        height: 30px;
        font-size: 16px;
        margin-bottom: 10px;
      }

      ul {
        li {
          font-size: 20px;
          line-height: 30px;
        }
      }

      p {
        font-size: 16px;
      }
    }

    .bottom {
      height: 40px;
      font-size: 16px;
    }
  }
}
</style>